<template>
	<view class="page" :style="themeColor">
		<view class="flex benben-position-layout flex flex-wrap align-center cardAndSafe_flex_0"
			:style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx'}">
			<view class='flex flex-wrap align-center justify-between flex-sub cardAndSafe_fd0_0'>
				<view class='flex flex-wrap align-center'>
					<person @showPopup="showPopup" @hidePopup="hidePopup"></person>
				</view>
				<view class='flex flex-wrap align-stretch justify-center flex-sub'>
					<text class='cardAndSafe_fd0_0_c1_c0'>show me</text>
				</view>
				<view class='flex flex-wrap align-center cardAndSafe_fd0_0_c2'>
				</view>
			</view>

		</view>
		<view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>

		<view class="loading_css" v-if="isShow">
			<u-loading size="36" color="#6A0002"></u-loading>
			<view class="loading_text">加载中</view>
		</view>

		<template v-else>
			<!---账号与安全两列flex布局开始-->
			<view class="flex flex-direction flex-wrap align-stretch cardAndSafe_flex_1">
				<view style="padding: 8rpx 0;">
					<back :isNext="'1'" @next="goNext"></back>
				</view>
			</view>
			<view class="page_content">
				<view class="user_name">
					<view class="name_city">
						<text class="name_city_1">{{detailsInfo.user_nickname}}</text>
						<text class="name_city_2">来自：{{detailsInfo.country}} {{detailsInfo.city}} {{detailsInfo.area}}</text>
					</view>
					<view class="user_phone" @tap.stop="getPhone(detailsInfo.mobile)">
						<image :src='STATIC_URL+"98.png"' mode="aspectFill"></image>
						<text>{{detailsInfo.mobile}}</text>
					</view>
				</view>
				<view class="label_list">
					<view class="label_item" @tap.stop="scrollToAnchor(1)">
						个人简介
					</view>
					<view v-if="is_open_comment == 1" class="label_item" @tap.stop="scrollToAnchor(2)">
						评论
					</view>
					<!-- <view class="label_item" @tap.stop="scrollToAnchor(3)" v-if="myInfo.user_type != 1">
						联系
					</view> -->
				</view>
				<view class="imgs">
					<view class="img_view" v-if="detailsInfo.personal_video">
						<view class="index_fd1_0">
							<template v-if="!is_play">
								<image class="index_fd1_0" :src="detailsInfo.personal_video_img" mode="aspectFill">
								</image>
								<image @tap.stop="playVideo" class="play_btn" :src='STATIC_URL+"97.png"' mode="">
								</image>
							</template>
							<view v-show="is_play">
								<video id="myVideo" :src="detailsInfo.personal_video" autoplay="true"
									@error="videoError" @ended="videoEnd" @pause="videoPause"></video>
							</view>
						</view>
						<!-- <view v-if="swiperList.length > 0">
							<swiper ref="benbenSwiperfd1_0" @change="swiperIndex = $event.detail.current"
								class='flex position-relative index_fd1_0' previous-margin="0rpx" next-margin="0rpx"
								:display-multiple-items="1" :interval="5000" :duration="500" :autoplay='false' :circular='false'>
							
								<swiper-item class='flex  index_fd1_0' v-for="(v, k) in swiperList" :key="k">
									<image @tap.stop="previewImage(k, swiperList)" class='index_fd1_0' mode="aspectFill" :src='v'></image>
								</swiper-item>
							</swiper>
							<view class='flex  index_fd1_0' v-for="(v, k) in swiperList" :key="k">
								<image @tap.stop="previewImage(k, swiperList)" class='index_fd1_0' mode="aspectFill"
									:src='v'></image>
							</view>
						</view> -->
						<!-- <view class="imgs_num" v-if="detailsInfo.is_video == 0">
							<image :src='STATIC_URL+"100.png"' mode=""></image>
							<text>{{swiperIndex+1}}/{{swiperList.length}}</text>
						</view> -->
					</view>
					<view v-if="swiperList.length > 0">
						<view class="img_view" v-for="(v, k) in swiperList" :key="k">
							<view class='flex  index_fd1_0' >
								<image @tap.stop="previewImage(k, swiperList)" class='index_fd1_0' mode="aspectFill" :src='v'></image>
							</view>
						</view>
					</view>
					<template v-if="detailsInfo.personal_video || swiperList.length > 0">
						<template v-if="detailsInfo.is_real_person_auth == 1 && detailsInfo.is_certify_auth == 1">
							<view class="renzheng">
								已实人认证
							</view>
						</template>
						<template v-else>
							<view class="renzheng" v-if="detailsInfo.is_real_person_auth == 1">
								已真人认证
							</view>
							<view class="renzheng" v-if="detailsInfo.is_certify_auth == 1">
								已实人认证
							</view>
						</template>
					</template>
					
					
					<view class="imgs_btn" v-if="myInfo.user_type != 1">
						<view class="btn_1" v-if="detailsInfo.is_follow == 0" @tap.stop="getFollow">
							<text>+</text>
							<text style="margin-left: 8rpx;">关注</text>
						</view>
						<view class="btn_1" v-else @tap.stop="getFollow">
							<text style="margin-left: 8rpx;">已关注</text>
						</view>
						<view class="btn_2" v-if="myInfo.id != id" @tap.stop="goChat">
							<image :src='STATIC_URL+"99.png"' mode=""></image>
							<text>私聊</text>
						</view>
					</view>
				</view>
				<view class="introduction jianjie" id="jianjie">
					<view class="introduction_title">个人简介</view>
					<view class="introduction_item">
						<view class="introduction_item_left">国籍</view>
						<view class="introduction_item_right">{{detailsInfo.nationality}}</view>
					</view>
					<view class="introduction_item">
						<view class="introduction_item_left">性别</view>
						<view class="introduction_item_right">{{detailsInfo.sex}}</view>
					</view>
					<view class="introduction_item">
						<view class="introduction_item_left">性取向</view>
						<view class="introduction_item_right">{{detailsInfo.sexual_orientation}}</view>
					</view>
					<view class="introduction_item">
						<view class="introduction_item_left">兴趣</view>
						<view class="introduction_item_right">{{detailsInfo.interest_meet}}</view>
					</view>
					<view class="introduction_item">
						<view class="introduction_item_left">肤色</view>
						<view class="introduction_item_right">{{detailsInfo.skin_color}}</view>
					</view>
					
					<view class="introduction_item">
						<view class="introduction_item_left">年龄</view>
						<view class="introduction_item_right">{{detailsInfo.age}}</view>
					</view>
					<!-- <view class="introduction_item">
						<view class="introduction_item_left">眼睛</view>
						<view class="introduction_item_right">{{detailsInfo.eye}}</view>
					</view> -->
					<view class="introduction_item">
						<view class="introduction_item_left">身高</view>
						<view class="introduction_item_right">{{detailsInfo.height}}</view>
					</view>
					<view class="introduction_item">
						<view class="introduction_item_left">体重</view>
						<view class="introduction_item_right">{{detailsInfo.weight}}</view>
					</view>
					<!-- <view class="introduction_item">
						<view class="introduction_item_left">头发</view>
						<view class="introduction_item_right">{{detailsInfo.hair}}</view>
					</view> -->
					<view class="introduction_item">
						<view class="introduction_item_left">胸围</view>
						<view class="introduction_item_right">{{detailsInfo.bust}}</view>
					</view>
					<!-- <view class="introduction_item">
						<view class="introduction_item_left">脱毛</view>
						<view class="introduction_item_right">{{detailsInfo.molt}}</view>
					</view> -->
					<view class="language_info">
						<view class="language_left">语言</view>
						<view class="language_right">
							<view class="star_content" v-for="(v, k) in lang_info" :key="k">
								<text class="star_name">{{v.lang}}</text>
								<htz-rate v-model="v.level" :readonly="true"></htz-rate>
							</view>
						</view>
					</view>
					<view class="work_date">
						<view class="work_title">工作时间</view>
						<template v-if="detailsInfo.time_info_type == 1">
							<view class="date_info">
								全天24小时
							</view>
						</template>
						<template v-else>
							<view class="date_info" v-for="(v, k) in time_info" :key="k">
								<text class="date_1">{{v.week}}</text>
								<template v-for="(v1, k1) in v.time">
									<text class="date_2">{{v1}}</text>
								</template>
							
							</view>
						</template>
					</view>
				</view>

				<!-- <view class="introduction phone_text" id="phone_text">
					<view class="introduction_title">所在城市</view>
					<view class="introduction_item" style="border: 0;padding: 32rpx 0 0;" v-for="(v, k) in city_info"
						:key="k">
						<view class="introduction_item_left">城市</view>
						<view class="introduction_item_right">{{v.city}}</view>
					</view>
				</view> -->
				<view class="introduction phone_text" id="phone_text">
					<view class="introduction_title">我的独白</view>
					<view class="introduction_item" style="border: 0;padding: 32rpx 0 0;">
						<view class="introduction_item_left">{{detailsInfo.monologue}}</view>
					</view>
				</view>

				<view class="comment pinglun" id="pinglun" v-if="is_open_comment == 1">
					<view class="comment_title">
						<text>评论</text>
						<!-- <text class="title_tips" v-if="!token">（登陆后可评论）</text> -->
					</view>
					<view class="comment_list">
						<view class="comment_item" v-for="(item, index) in list" :key="index">
							<view class="item_img">
								<image :src='item.user_head_img' mode="aspectFill"></image>
							</view>
							<view class="item_right">
								<view class="item_name">{{item.user_nickname}}</view>
								<view class="item_date">{{item.create_time}}</view>
								<view class="item_content">
									<rich-text :nodes="item.content"></rich-text>
								</view>
							</view>
						</view>
					</view>

					<view class="paging" v-if="last_page > 1">
						<Pagination :showArrow="false" :total="total" :pageSize="pageSize" :nowPage="page"
							@change="change">
						</Pagination>
					</view>
				</view>

				<view class="top_img" @tap.stop="goTop">
					<image :src='STATIC_URL+"101.png"' mode="aspectFill"></image>
				</view>

				<view v-if="is_open_comment == 1" class="read_img" @tap.stop="show=true">
					<image :src='STATIC_URL+"102.png"' mode="aspectFill"></image>
				</view>
			</view>
		</template>


		<!-- 评论弹窗 -->
		<u-popup v-model="show" mode="bottom" border-radius="32">
			<view class="pinglun_content">
				<view class="html_content">
					<textarea class="html_content_text" maxlength="120" placeholder="请输入" v-model="commonValue"
						@confirm="getComment"></textarea>
					<!-- <jinEdit ref="jinEdit" :showImgToolbar="true" :html="commonValue" @editOk="editOk"></jinEdit> -->
				</view>
				<view class="html_btn" @tap.stop="getComment">评论</view>
			</view>
		</u-popup>
		<!-- 底部页尾 -->
		<page-foot></page-foot>
		<view style="height: 120rpx;"></view>


	</view>
</template>
<script>
	import back from "@/components/back/index.vue"
	import person from "@/components/person/index.vue"
	import htzRate from '@/components/htz-rate/htz-rate.vue'
	import Pagination from "@/components/bwm-pagination/bwm-pagination.vue"
	import pageFoot from "@/components/pageFoot/index.vue"
	import jinEdit from '@/components/jin-edit/jin-edit.vue';
	export default {
		components: {
			back,
			person,
			htzRate,
			Pagination,
			pageFoot,
			jinEdit
		},


		data() {
			return {
				isShow: true,
				show: false,
				pageScrollTop: 0,
				content: "",
				ceshi1: 3,
				total: 0,
				pageSize: 20,
				page: 1,
				last_page: 0,
				token: "",
				id: "", // 用户id
				detailsInfo: {}, // 详情数据
				lang_info: [], // 语言
				time_info: [], // 工作时间
				city_info: [], // 城市
				list: [],
				commonValue: "",
				swiperIndex: 0,
				myInfo: global.userInfo,
				swiperList: [], // 图片列表
				is_play: false,
				videoContext: null, // 视频对象
				myUser: {}, // 我的个人资料
				play_status: 0,
				is_open_comment: 0,
			};
		},
		computed: {
			themeColor() {
				return this.$store.getters.themeColor
			},

		},
		watch: {},
		onLoad(options) {
			let {
				id
			} = options;
			if (id !== undefined) this.id = id;
			// this.id = 160;
			this.isDisplay();
		},
		onUnload() {

		},
		onReady() {
			this.videoContext = uni.createVideoContext('myVideo');
		},
		onShow() {
			this.token = global.token;
		},
		onHide() {

		},
		onResize() {

		},
		onPullDownRefresh() {

		},
		onReachBottom(e) {

		},
		onPageScroll(e) {
			this.pageScrollTop = e.scrollTop;
		},
		methods: {
			showPopup() {
				this.is_play = false;
				this.videoContext.pause();
			},
			hidePopup() {
				if (this.play_status == 1) {
					this.is_play = true;
					this.videoContext.play();
				}
			},
			previewImage(index, url) {
				uni.previewImage({
					current: index,
					urls: url
				});
			},

			// 修改评论页数
			change(nowPage) {
				this.page = nowPage;
				this.getCommon();
			},
			goTop() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 200
				});
			},
			// 控制是否显示评论  post659ce5e3a1de8
			isDisplay() {
				this.$api.post(global.apiUrls.post659ce5e3a1de8, {

				}).then(res => {
					// console.log(res);
					if (res.data.code == 1) {
						this.is_open_comment = res.data.data.is_open_comment;
						this.getUserData();
						if (this.is_open_comment == 1) {
							this.getCommon();
						}
					} else {
						this.$message.info(res.data.msg);
					}
				})
			},
			// 用户详情  post659fdac603668
			getUserData() {
				this.$api.post(global.apiUrls.post659fdac603668, {
					user_id: this.id
				}).then(res => {
					// console.log(res);
					this.isShow = false;
					if (res.data.code == 1) {
						this.detailsInfo = res.data.data;
						this.swiperList = res.data.data.images;
						this.lang_info = res.data.data.lang_info;
						this.time_info = res.data.data.time_info;
						this.city_info = res.data.data.city_info;
					} else {
						this.$message.info(res.data.msg);
					}
				})
			},
			// 主评论列表  post659fe7c3eb517
			getCommon() {
				this.$api.post(global.apiUrls.post659fe7c3eb517, {
					user_id: this.id,
					page: this.page
				}).then(res => {
					// console.log(res);
					if (res.data.code == 1) {
						this.total = res.data.data.data.total;
						this.last_page = res.data.data.data.last_page;
						this.pageSize = res.data.data.data.per_page;
						this.list = res.data.data.data.data;
					} else {
						this.$message.info(res.data.msg);
					}
				})
			},
			editOk(e) {
				this.commonValue = e.html;
			},
			// 评论  post659fe7b68c5a4
			getComment() {
				if (!this.commonValue) {
					this.$message.info('请输入评论内容');
					return;
				}
				this.show = false;
				this.$api.post(global.apiUrls.post659fe7b68c5a4, {
					user_id: this.id,
					content: this.commonValue
				}).then(res => {
					this.$message.info(res.data.msg);
					if (res.data.code == 1) {
						this.getCommon();
						this.commonValue = "";
					}
				})
			},
			playVideo() {
				this.is_play = true;
				this.videoContext.play();
				this.play_status = 1;
			},
			videoPause() {

			},
			videoError() {
				this.$message.info('视频播放失败，请重试');
				this.is_play = false;
				this.play_status = 0;
			},
			videoEnd() {
				this.is_play = false;
				this.play_status = 0;
			},
			// 锚点定位
			scrollToAnchor(type) {
				let id = "";
				let calssText = "";
				if (type == 1) {
					id = '#jianjie';
					calssText = ".jianjie";
				} else if (type == 2) {
					id = '#pinglun';
					calssText = ".pinglun";
				} else if (type == 3) {
					id = '#phone_text';
					calssText = ".phone_text";
				}
				uni.createSelectorQuery().select(id).boundingClientRect(rect => {
					if (rect) {
						// 获取到了目标元素的信息，进行滑动操作
						this.$nextTick(() => {
							const query = uni.createSelectorQuery();
							query.select(calssText).scrollOffset((res) => {
								// res.scrollTop表示容器已经滚动的高度
								// rect.top表示目标元素与容器顶部之间的距离
								// 计算出需要滚动的距离
								let distance = res.scrollTop + rect.top - 50; // 这里的50是调整滚动位置的偏移量

								// 开始滚动
								uni.pageScrollTo({
									selector: '.container',
									duration: 200, // 滚动持续时间（单位ms）
									scrollTop: distance, // 滚动到指定位置
								});
							}).exec();
						})
					} else {
						console.log('未找到目标元素');
					}
				}).exec();
			},
			// 关注  647322fb760b6
			getFollow() {
				this.$api.post(global.API_VERSION + '/647322fb760b6', {
					user_id: this.id
				}).then(res => {
					this.$message.info(res.data.msg);
					if (res.data.code == 1) {
						this.getUserData();
					}
				})
			},
			// 联系
			getPhone(mobile) {
				uni.makePhoneCall({
					phoneNumber: mobile, //电话号码
					success: function(e) {
						console.log(e);
					},
					fail: function(e) {
						console.log(e);
					}
				})
			},
			// 私聊
			goChat() {
				// this.$message.info('暂未开启聊天功能');
				uni.navigateTo({
					url: '/pages/home/chat/chat?id=' + this.id
				})
			},
			// 下一个
			goNext() {
				if (this.detailsInfo.next_user_id != 0) {
					this.id = this.detailsInfo.next_user_id;
					this.isShow = true;
					this.getUserData();
					this.getCommon();
				} else {
					this.$message.info('已经是最后一个了');
				}
			},
		}
	};
</script>
<style lang="scss" scoped>
	.pinglun_content {
		padding: 40rpx 30rpx;

		.html_content {
			background: #f8f8f8;
			padding: 0rpx 24rpx 32rpx;
			border-radius: 16rpx;
			margin-bottom: 24rpx;

			.html_content_text {
				padding: 24rpx 0 0;
				font-size: 28rpx;
			}
		}

		.html_btn {
			width: 686rpx;
			height: 72rpx;
			line-height: 72rpx;
			text-align: center;
			background: #6A0002;
			border-radius: 12rpx;
			font-size: 28rpx;
			color: #fff;
		}
	}

	.read_img {
		width: 104rpx;
		height: 104rpx;
		position: fixed;
		right: 34rpx;
		bottom: 290rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.top_img {
		width: 104rpx;
		height: 104rpx;
		position: fixed;
		right: 34rpx;
		bottom: 443rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.page_content {
		padding: 0 32rpx;

		.user_name {
			background: #FFFFFF;
			box-shadow: 0px 0px 12rpx 1px rgba(0, 0, 0, 0.05);
			border-radius: 16rpx;
			padding: 32rpx 24rpx;
			margin: 24rpx 0;

			.name_city {
				display: flex;

				.name_city_1 {
					font-weight: bold;
					font-size: 32rpx;
				}

				.name_city_2 {
					font-size: 24rpx;
					color: #999;
					margin-left: 15rpx;
					display: flex;
					transform: translateY(8rpx);
				}
			}

			.user_phone {
				display: flex;
				align-items: center;
				font-size: 28rpx;
				margin-top: 16rpx;

				image {
					width: 40rpx;
					height: 40rpx;
					margin-right: 6rpx;
				}
			}
		}

		.label_list {
			display: flex;

			.label_item {
				width: 146rpx;
				height: 60rpx;
				background: #FFFFFF;
				border-radius: 8rpx;
				opacity: 1;
				border: 1px solid #8B060D;
				color: #8B060D;
				font-size: 26rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 24rpx;
			}
		}

		.imgs {
			background: #fff;
			border-radius: 16rpx;
			overflow: hidden;
			margin: 32rpx 0 0;
			position: relative;

			.img_view {
				width: 686rpx;
				height: 686rpx;
				position: relative;

				.index_fd1_0 {
					width: 686rpx;
					height: 686rpx;
					position: relative;

					.play_btn {
						width: 64rpx;
						height: 64rpx;
						position: absolute;
						left: 50%;
						top: 50%;
						transform: translate(-50%, -50%);
					}
				}

				video {
					width: 686rpx;
					height: 686rpx;
				}

				image {
					width: 100%;
					height: 100%;
				}

				

				.imgs_num {
					font-size: 28rpx;
					color: #fff;
					display: flex;
					align-items: center;
					justify-content: center;
					position: absolute;
					width: 135rpx;
					height: 56rpx;
					background: rgba(0, 0, 0, 0.5);
					border-radius: 28rpx;
					right: 24rpx;
					bottom: 24rpx;

					image {
						width: 32rpx;
						height: 32rpx;
						margin-right: 15rpx;
					}
				}
			}
			.renzheng {
				width: 180rpx;
				height: 56rpx;
				border-radius: 0px 16rpx 0px 16rpx;
				background: rgba(0, 0, 0, 0.4);
				color: #fff;
				font-size: 28rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				position: absolute;
				top: 0;
				right: 0;
			}

			.imgs_btn {
				padding: 26rpx 24rpx;
				display: flex;
				width: 100%;

				.btn_1 {
					font-size: 28rpx;
					color: #8B060D;
					width: 146rpx;
					height: 64rpx;
					border-radius: 8rpx;
					opacity: 1;
					border: 1px solid #8B060D;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				.btn_2 {
					width: 146rpx;
					height: 64rpx;
					background: #8B060D;
					display: flex;
					align-items: center;
					justify-content: center;
					color: #fff;
					font-size: 28rpx;
					border-radius: 8rpx;
					margin-left: 24rpx;

					image {
						width: 32rpx;
						height: 32rpx;
						margin-right: 12rpx;
					}
				}
			}
		}

		.introduction {
			background: #fff;
			border-radius: 16rpx;
			padding: 32rpx 24rpx;
			margin-bottom: 24rpx;

			.introduction_title {
				font-weight: bold;
				font-size: 32rpx;

			}

			.miaoshu {
				padding: 24rpx 0;
				font-size: 32rpx;
				line-height: 48rpx;

				.miaoshu_label {
					display: inline-block;
					text-align: center;
					line-height: 40rpx;
					background: #E1CCCC;
					color: #6A0002;
					font-size: 24rpx;
					width: 80rpx;
					height: 40rpx;
					border-radius: 6rpx;
					margin-right: 16rpx;
				}
			}

			.introduction_item {
				display: flex;
				justify-content: space-between;
				padding: 32rpx 0;
				border-bottom: 1px solid #EEEEEE;

				.introduction_item_left {
					font-size: 32rpx;
					color: #333;
				}

				.introduction_item_right {
					font-size: 32rpx;
					color: #666;
				}
			}

			.language_info {
				display: flex;
				justify-content: space-between;
				padding: 0rpx 0rpx 32rpx 0;
				border-bottom: 1px solid #EEEEEE;

				.language_left {
					font-size: 32rpx;
					color: #333;
					padding-top: 32rpx;
				}

				.language_right {
					.star_content {
						display: flex;
						align-items: center;
						margin-top: 32rpx;

						.star_name {
							font-size: 28rpx;
							color: #666;
						}
					}
				}
			}

			.work_date {
				padding: 32rpx 0 0;

				.work_title {
					font-size: 32rpx;
				}

				.date_info {
					margin-top: 32rpx;
					font-size: 32rpx;
					color: #666;

					.date_2 {
						margin: 0 60rpx 0 32rpx;
					}
				}
			}
		}

		.comment {
			background: #fff;
			border-radius: 16rpx;
			padding: 32rpx 24rpx;

			.comment_title {
				font-size: 32rpx;
				font-weight: bold;

				.title_tips {
					font-size: 24rpx;
					color: #999;
					margin-left: 12rpx;
				}
			}

			.comment_list {
				.comment_item {
					padding: 32rpx 0 0 0;
					display: flex;

					.item_img {
						width: 72rpx;
						height: 72rpx;

						image {
							width: 72rpx;
							height: 72rpx;
							border-radius: 50%;
						}
					}

					.item_right {
						width: calc(100% - 96rpx);
						padding: 0 0 32rpx 0;
						margin-left: 24rpx;
						border-bottom: 1px solid #eee;

						.item_name {
							font-size: 28rpx;
							font-weight: 500;
							color: #666;
						}

						.item_date {
							font-size: 24rpx;
							font-weight: 500;
							color: #999;
							margin: 10rpx 0 24rpx 0;
						}

						.item_content {
							font-size: 28rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							color: #333333;
						}
					}
				}
			}

			.paging {
				display: flex;
				justify-content: center;
				margin-top: 24rpx;
			}
		}
	}








	.home_img {
		width: 40rpx;
		height: 40rpx;
	}

	.page {
		width: 100vw;
		overflow-x: hidden;
		min-height: calc(100vh - var(--window-bottom));
		background: #f8f8f8;
		background-size: 100% auto !important;
	}

	.cardAndSafe_flex_0 {
		border-bottom: 1px solid #eee;
		background: #fff;
		width: 750rpx;
		height: 88rpx;
		overflow: hidden;
		z-index: 10;
		top: 0rpx;
		background-size: 100% auto !important;
	}

	.cardAndSafe_fd0_0_c2 {
		width: 40rpx;
		height: 40rpx;
	}

	.cardAndSafe_fd0_0_c1_c0 {
		line-height: 88rpx;
		color: #333333;
		font-size: 36rpx;
		font-weight: bold;
		font-family: PingFang SC, PingFang SC;
	}

	.cardAndSafe_fd0_0_c0_c0 {
		font-size: 32rpx;
		font-weight: 500;
		color: #333;
		line-height: 88rpx;
	}

	.cardAndSafe_fd0_0 {
		margin: 0rpx 32rpx 0rpx 32rpx;
	}

	.cardAndSafe_flex_1 {
		background: linear-gradient(to bottom, #fff, #f8f8f8);
		font-size: 32rpx;
		background-size: 100% auto !important;
		padding: 0rpx 32rpx 0rpx 32rpx;
	}

	.cardAndSafe_fd1_3 {
		padding: 32rpx 0rpx 32rpx 0rpx;
	}

	.cardAndSafe_fd1_0_c1 {
		font-size: 26rpx;
		color: rgba(191, 191, 191, 1);
		font-weight: 400;
	}

	.cardAndSafe_fd1_0_c0 {
		font-size: 32rpx;
		font-weight: 400;
		color: #333333;
	}

	.cardAndSafe_fd1_0 {
		border-bottom: 1px solid #eee;
		padding: 32rpx 0rpx 32rpx 0rpx;
	}

	.cardAndSafe_flex_2 {
		height: 88rpx;
		position: fixed;
		bottom: 64rpx;
		left: 30rpx;
	}

	.cardAndSafe_fd2_0 {
		background: #6A0002;
		border-radius: 44rpx;
		font-size: 32rpx;
		font-weight: 500;
		color: #fff;
		width: 690rpx;
		height: 88rpx;
		line-height: 88rpx;
	}
</style>